<template>
  <div class="header">
    <!--     <div class="header">
      <span style="font-size:16px; font-weight:580">{{value}}</span>
      <div>
        <a @click="delet" class="box">
          <a-icon type="left" />
        </a>
        <a @click="add" class="box">
          <a-icon type="right" />
        </a>
      </div>

    </div>
    <div style="width: 350px; ">
      <a-calendar :fullscreen="false" :header-render="headerRender" @change="onChange" />
    </div> -->
    <div :style="{ width: '350px'}">
      <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
    </div>
  </div>

</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      value: ''
    }
  },
  created () {
    let day = new Date()
    this.value = day && moment().format('YYYY年MM月')
  },
  methods: {
    onPanelChange (value, mode) {
      console.log(value, mode)
    },
    onChange (date) {
      let value = date && moment().format('YYYY年MM月DD日')
      this.value = value
      console.log(value)
    },
    headerRender ({ value, type, onChange, onTypeChange }) {
      return (
        <div >
        </div>
      )
    },
    delet () {

    },
    add () {

    }
  }
}
</script>
<style lang="less" scoped>
.header {
  width: 350px;
  margin-top: 30px;
  margin-bottom: 10px;
}
/* .box {
  // font-weight: bold;
  line-height: 30px;
  color: #333;
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 6px;
  padding-left: 8px;
} */
/* .box:hover {
  width: 30px;
  height: 30px;
  background-color: rgba(192, 192, 192, 0.493);
  border-radius: 4px;
} */
/* .ant-icon {
  display: block;
} */
</style>
